<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #def7fe;
        }

        .container {
            /*width: 95%;*/
            /*margin: 20px auto;*/
        }

        label {
            font-size: 11px;
            color: darkgray;
        }

        h1 {
            color: #003b2a;
            font-size: 20px;
        }

        .search-item {
            margin: 10px 0;
            margin-top: 0;
        }

        .input {
            /*float: right;*/
            width: 100%;
            height: 25px;
            /*border: 10px;*/
            border-radius: 5px;
        }

        #display {
            float: left;
            width: 72%;
            /*max-width: 1000px;*/
        }

        .search {
            float: right;
            width: 150px;
            margin-right: 40px;
        }

        .button {
            width: 100%;
            height: 30px;
            border-radius: 5px;
            border: 0;
        }

        .button:hover {
            background-color: cadetblue;
        }


        #comment-table {
            /*margin: 0 auto;*/
            text-align: left;
            border-radius: 10px;
        }

        #comment-table table {
            width: 100%;
            margin: 15px 0
        }

        #comment-table th {
            background-color: #93DAFF;
            background: -o-linear-gradient(90deg, #93DAFF, #c1e9fe);
            background: -moz-linear-gradient(center top, #93DAFF 5%, #c1e9fe 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #93DAFF), color-stop(1, #c1e9fe));
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93DAFF', endColorstr='#c1e9fe');
            color: #000000
        }

        #comment-table, #comment-table th, #comment-table td {
            font-size: 0.95em;
            text-align: center;
            padding: 4px;
            border-bottom: 1px solid #efefef;
            border-collapse: collapse
        }

        #comment-table tr:nth-child(odd) {
            background-color: #dbf2fe;
            background: -o-linear-gradient(90deg, #dbf2fe, #f7fcfe);
            background: -moz-linear-gradient(center top, #dbf2fe 5%, #f7fcfe 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dbf2fe), color-stop(1, #f7fcfe));
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dbf2fe', endColorstr='#f7fcfe');
        }

        #comment-table tr:nth-child(even) {
            background-color: #fdfdfd;
        }

        table > thead > tr > th:first-child {
            padding-left: 20px;
            /*width: 90%;*/
        }

        tr {
            height: 30px;
            padding-left: 20px;
        }

        th {
            /*margin-right: 50px;*/
        }

        #song-id {
            width: 9%;
        }

        #song {
            width: 7%;
        }

        #time {
            width: 10%;
        }

        #comment-id {
            width: 7%;
        }

        #nickname {
            width: 7%;
        }

        #content {
            width: 60%;
        }
    </style>
    -->
    <meta charset="UTF-8">
    <title>查询</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table-locale-all.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css" rel="stylesheet">
    <style>
        .container {
            width: 97%;
        /*    display: flex;*/
        /*    display: -webkit-flex;*/
        }

        /*#display {*/
        /*    width: 70%;*/
            /*display: flex;*/
            /*float: left;*/
        /*}*/

        /*.search {*/
        /*    width: 29%;*/
            /*float: right;*/
        /*}*/
    </style>
</head>
<body>
<!--$(selector).post(URL,data,function(data,status,xhr),dataType)-->
<div class="container">
    <div class="search form-inline">
        <h1 style="inset-inline: auto"> 内容查询 </h1>
        <button class="button btn btn-default" onclick="search()" type="submit">查询</button>
        <div class="form-group col-sm-3">
            <label for="content_input" class="col-sm-3 control-label">内容</label>
            <input class="form-control col-sm-2" id="content_input" name="content"
                   type="text"/>
        </div>
        <div class="form-group col-sm-3">
            <label for="song_id" class="col-sm-3 control-label">歌曲ID</label>
            <input class="form-control col-sm-2" id="song_id" name="song_id" type="text"/>
        </div>
        <div class="form-group col-sm-3">
            <label for="user_id" class="col-sm-3 control-label">用户ID</label>
            <input class="form-control col-sm-2" id="user_id" name="user_id" type="text"/>
        </div>
        <div class="form-group col-sm-3">
            <label for="comment_id" class="col-sm-3 control-label">评论ID</label>
            <input class="form-control col-sm-2" id="comment_id" name="comment_id"
                   type="text"/>
        </div>
    </div>
    <div id="display">
        <table class="table table-striped" id="comment_table">
            <thead id="comment-head">
            <tr>
                <th id="song-id">名称</th>
                <th id="song">歌曲ID</th>
                <th id="nickname">昵称</th>
                <th id="time">时间</th>
                <th id="comment-id">ID</th>
                <!--<th>Avatar</th>-->
                <th id="content">内容</th>
            </tr>
            </thead>
            <tbody id="comment-body">
            </tbody>
        </table>
    </div>
</div>

<script>
    var filter = '';

    function search() {
        content = $("#content_input").val();
        song_id = $("#song_id").val();
        user_id = $("#user_id").val();
        comment_id = $("#comment_id").val();
        console.log(content, song_id, user_id, comment_id);

        $.post('/search',
            {
                content: content,
                song_id: song_id,
                user_id: user_id,
                comment_id: comment_id,
                filter: filter
            },
            function (data) {
                // console.log(data)
                // data = JSON.parse(e.data);
                let commentHead = document.getElementById("comment-body");
                commentHead.innerHTML = '';
                for (i = 0; i < data.length; i++) {
                    // <th style="padding-left: 30px" id="song-id">名称</th>
                    //         <th id="nickname">昵称</th>
                    //         <th id="time">时间</th>
                    //         <th id="comment-id">ID</th>
                    //         <!--<th>Avatar</th>-->
                    //         <th id="content">内容</th>
                    // todo: 歌曲ID
                    console.log(data[i].song, data[i].song_id, data[i].nickname, data[i].time, data[i].commentId, data[i].content);
                    refresh(data[i].song, data[i].song_id, data[i].nickname, data[i].time, data[i].commentId, data[i].content);
                }

            },
            'json');
    }


    function refresh(_song, _song_id, _nickname, _time, _commentID, _content) {
        let commentHead = document.getElementById("comment-body");
        let song = document.createElement('td');
        song.textContent = _song;
        let song_id = document.createElement('td');
        song_id.textContent = _song_id;
        let nickname = document.createElement('td');
        nickname.textContent = _nickname;
        let tr = document.createElement('tr');
        let time = document.createElement('td');
        let time_obj = new Date(_time);
        time.textContent = time_obj.getFullYear().toString() + '/' + time_obj.getMonth() + '/' + time_obj.getDay() + '-' + time_obj.getHours() + 'H';
        let commentID = document.createElement('td');
        commentID.textContent = _commentID;
        // let avatar = document.createElement('td');
        // todo: 添加图片
        // img = document.createElement('img');
        // img.style.borderRadius="8px";
        // img.src=_avatar;
        // img.height=50;
        // img.width=50;
        // img.style.margin = "0 20px";
        // avatar.appendChild(img);
        // avatar.textContent = _avatar;

        let content = document.createElement('td');
        content.style.textAlign = "left";
        content.textContent = _content;
        tr.appendChild(song);
        tr.appendChild(song_id);
        tr.appendChild(nickname);
        tr.appendChild(time);
        tr.appendChild(commentID);
        // tr.appendChild(avatar);
        tr.appendChild(content);
        commentHead.append(tr);

        // if (commentHead.childElementCount > 40) {
        //     commentHead.childNodes[commentHead.childElementCount - 1].remove()
        // }
    }
</script>
</body>
</html>